<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</h:head>

<h:body>
	<ui:composition template="/WEB-INF/facelets/template.xhtml">
		<ui:define name="body">
			<f:view>
				<p:ajaxStatus onstart="statusDialog.show();"
					onsuccess="statusDialog.hide();" />
				<p:dialog modal="true" widgetVar="statusDialog" header="Loading"
					draggable="false" closable="false">
					<p:graphicImage
						value="#{facesContext.externalContext.request.scheme}://#{facesContext.externalContext.request.serverName}:#{facesContext.externalContext.request.serverPort}#{facesContext.externalContext.request.contextPath}/images/ajaxloadingbar.gif" />
				</p:dialog>
				<h:form id="formDialog">
					<p:messages id="msg" showDetail="true" />
					<p:growl id="men" />
					<p:panel id="panelRoles" header="Rol">
						<h:panelGrid columns="4" id="panelGrid">
							<h:outputText id="msgNombreRol" value="Nombre Rol" />
							<p:inputText id="txtNombreRol" disabled="flase"
								binding="#{rolesView.txtNombreRol}" />

							<h:outputText id="msgEstadoRegistro" value="Estado" />
							<p:selectOneMenu id="estadoRegistro"
								value="#{rolesView.estadoRegistro}">
								<f:selectItem itemLabel="Seleccione" itemValue="" />
								<f:selectItem itemLabel="Activo" itemValue="A" />
								<f:selectItem itemLabel="Inactivo" itemValue="I" />
							</p:selectOneMenu>
						</h:panelGrid>
					</p:panel>
					<p:panel id="panelBotones">
						<div align="center">
							<p:commandButton id="btnSave" binding="#{rolesView.btnSave}"
								disabled="false" value="Save"
								action="#{rolesView.action_save()}"
								update="panelRoles,msg,panelBotones"/>

							<p:commandButton id="btnClear" value="Clear"
								action="#{rolesView.action_clear()}"
								update="panelRoles,msg,panelBotones" />
						</div>
					</p:panel>

					<p:panel id="msgProjectClientesTitle" header="RolesData">
						<p:messages id="msgD" showDetail="true" />
						<p:dataTable id="tabla" value="#{rolesView.data}" var="roles"
							paginator="true" rows="5" editable="true">

							<p:ajax event="rowEdit"
								update=":formDialog:msgD,:formDialog:tabla"
								listener="#{rolesView.rowEventListener}" />

							<p:column filterBy="#{roles.nombreRol}"
								sortBy="#{roles.nombreRol}" headerText="nombreRol">
								<p:cellEditor>
									<f:facet name="output">
										<h:outputText value="#{roles.nombreRol}" />
									</f:facet>
									<f:facet name="input">
										<p:inputText value="#{roles.nombreRol}" />
									</f:facet>
								</p:cellEditor>
							</p:column>
							<p:column filterBy="#{roles.estadoRegistro}"
								sortBy="#{roles.estadoRegistro}" headerText="estadoRegistro">
								<p:cellEditor>
									<f:facet name="output">
										<h:outputText value="#{roles.estadoRegistro}" />
									</f:facet>
									<f:facet name="input">
										<p:inputText value="#{roles.estadoRegistro}" />
									</f:facet>
								</p:cellEditor>
							</p:column>
							<p:column headerText="Options">
								<p:rowEditor id="row" />
								<p:tooltip for="row" value="Edit" showEffect="fade"
									hideEffect="fade" />
							</p:column>
						</p:dataTable>
					</p:panel>
				</h:form>
			</f:view>
		</ui:define>
	</ui:composition>
</h:body>
</html>
